(UP)    

L'image sur le Web

Aujourd'hui, les pages HTML incluent de nombreuses images et icônes. Si l'intérêt en terme d'esthétique ne fait pas de doutes, les contraintes de bande passante et les régles élémentaires de design écran conduisent à un certain nombre de réfléxions, que je vais vous faire partager...

 

De l'importance du champ 'ALT'

Le langage HTML qui sous-tend toute page sur le Web permet d'y insérer des images. Outre le nom du fichier, il est possible de spécifier dans la balise <IMG> un certain nombre de paramètres supplémentaires, parmi lesquels le champ ALTernate.
Celui-ci contient un ou plusieurs mots se rapportant à l'image. C'est un équivalent-texte de l'image. Il y a plusieurs raisons pour veiller à toujours renseigner ce champ:

  1. lorsque la vitesse de connexion diminue, il est tentant de désactiver l'affichage des images, dont le chargement consomme la majeure partie de la bande passante. Dès lors, ces dernières sont remplacées par un petit rectangle qui ne donne aucune information sur l'image qui aurait pu s'afficher. Si un groupe de mots est spécifié après le champ ALT, il sera affiché à côté du rectangle, donnant une idée sur le contenu de l'image ou sa fonction.
  2. certains moteurs de recherche (comme Altavista) autorisent la recherche d'images sur un thème précis. Difficile pour un automate d'analyser le contenu d'une image... En revanche, il peut très bien s'appuyer sur le champ ALT pour référencer l'image. Alors si votre image représente un arbre, spécifier 'Arbre' dans le champ ALT...
Image seule Image avec champ 'ALT' Image complète

Préciser les dimensions des images

On ne le répétera jamais assez, il FAUT préciser les dimensions de TOUTES les images présentes dans une page HTML... En effet, le chargement des images est lent comparé à celui du texte. Connaître les dimensions des images avant leur chargement effectif permet au navigateur de réaliser sa mise en page en laissant la place nécessaire aux images, qui prendront leur place au fur et à mesure du temps écoulé. D'où un confort de lecture grandement amélioré...

Ce travail est pris en charge dans les outils de création de pages HTML récents (FrontPage, HotMétal,...), sinon il faut noter la taille de l'image au moment de sa sauvegarde, et la répercuter à la main dans le code HTML, via les attributs WIDTH et HEIGHT de la balise <IMG>...

<IMG SRC="fleche.gif" WIDTH=30 HEIGHT=24 ALT="->">

Le codage HTML d'une image, avec tous les détails voulus

Cartes sensibles

Sous ce terme bien français se cachent les fameuses image-maps chères aux coeurs des anglo-saxons. C'est quoi donc ? Tout simplement ces images que l'on découpe en plusieurs parties, chacune étant associée à une page HTML différente.

Ce mécanisme est extrêmement pratique, esthétique et convivial, mais pose néanmoins un problème de taille: qu'advient-il si l'utilisateur désactive l'affichage des images, ou si les temps de chargement sont si lent que la carte met plusieurs minutes à se charger ? (si,si, ça arrive, et pas qu'en France!!!).

Il est nécessaire de toujours offrir une porte de sortie. A savoir qu'aucune carte sensible ne devrait apparaître sur le Web sans une ligne de texte permettant d'accèder aux rubriques de manière directe sans attendre le chargement de la carte. Ceci est d'autant plus souhaitable que la carte est de grande dimensions, donc lente à charger.

Pour une illustration, voir la page d'accueil de ce site ! Hélas, cette idée n'est pas la mieux partagée de la 'toile'...

Formats entrelacés

Une image entrelacée, c'est une image dont le fichier source (.gif, .jpeg, .png, etc.) est enregistré de telle sorte que l'affichage puisse s'effectuer de manière progressive.

Ainsi, le navigateur donnera d'abord une allure grossière de l'image, qui sera petit à petit raffinée. Ce mécanisme est assez agréable, dans la mesure où notre cerveau est souvent assez performant pour deviner le contenu d'une image dans cette bouillie de pixels !Options GIF

Il y a 2 ans de ça, le seul navigateur à supporter les formats entrelacés était Netscape. Aujourd'hui, c'est le cas de presque tous ceux du marché. Donc, infographistes du Web, pensez à cocher la case 'entrelacé' lorsque vous sauvegardez vos images GIF ou JPEG avec PaintShop Pro, PhotoShop, Xara, et autres...

Pour un exemple d'utilisation du JPEG progressif, voyez cette page.

Optimisation des palettes

Ce point très important sera abordé ici dans quelques temps. Idées principales: adapter le format graphique au type d'image véhiculé; compresser les palettes au maximum; employer les palettes spécifiques aux navigateurs, etc.

http://wwwperso.hol.fr/~xgerbeau/creation
© juillet 1997 - Xavier GERBEAUD